<template>
	<!-- 底部导航链接组件 -->
	<div class="container-sitefooter">
		<div class="find-container"><span>爱彼迎</span>
			<ul class="href-list">
				<li><a href="javascript:">工作机会</a></li>
				<li><a href="javascript:">爱彼迎新闻</a></li>
				<li><a href="javascript:">政策</a></li>
				<li><a href="javascript:">帮助</a></li>
				<li><a href="javascript:">多元化与归属感</a></li>
				<li><a href="javascript:">无障碍设施</a>
					<badge></badge>
				</li>
			</ul>
		</div>
		<div class="find-container"><span>发现</span>
			<ul class="href-list">
				<li><a href="javascript:">信任与安全</a></li>
				<li><a href="javascript:">旅行基金</a></li>
				<li><a href="javascript:">爱彼迎公民</a></li>
				<li><a href="javascript:">商务差旅</a></li>
				<li><a href="javascript:">缤纷体验</a>
					<badge></badge>
				</li>
				<li><a href="javascript:">爱彼迎杂志</a></li>
			</ul>
		</div>
		<div class="find-container"><span>出租</span>
			<ul class="href-list">
				<li><a href="javascript:">为什么要出租?</a></li>
				<li><a href="javascript:">待客之道</a></li>
				<li><a href="javascript:">房东义务</a></li>
				<li><a href="javascript:">开展体验</a>
					<badge></badge>
				</li>
				<li><a href="javascript:">Open Homes</a></li>
			</ul>
		</div>
		<div class="find-container">
			<ul class="href-list share-container">
				<li>
					<span>
						<a href="http://www.weibo.com/">
							<svg aria-label="前往微博" focusable="false" role="img"
							     style="height: 18px; width: 18px; display: block; fill: rgb(118, 118, 118);"
							     viewBox="0 0 32 32">
								<path d="m30.85 14.19c-.15.61-.85.98-1.46.77-.64-.22-.97-.86-.76-1.5.67-2.14.27-4.05-1.21-5.7-1.37-1.56-3.5-2.17-5.47-1.78-.64.15-1.25-.28-1.37-.89-.15-.64.27-1.29.88-1.41 2.77-.61 5.68.31 7.72 2.51 1.97 2.24 2.55 5.33 1.67 8zm-4.77-5.18c-.95-1.11-2.4-1.53-3.74-1.25-.52.12-.88.61-.79 1.2.12.58.64.92 1.22.8.7-.15 1.31.06 1.82.61.49.58.61 1.23.39 1.9-.15.58.15 1.13.67 1.29a1.02 1.02 0 0 0 1.25-.67c.46-1.44.18-2.73-.82-3.86zm-9.33 13.42c-1 2.33-3.95 3.62-6.5 2.79-2.43-.77-3.53-3.22-2.43-5.42 1.06-2.11 3.8-3.31 6.2-2.69 2.52.64 3.74 3 2.73 5.33zm-5.13-1.81c-.82-.34-1.79 0-2.28.77s-.24 1.68.52 2.05 1.85 0 2.34-.77c.49-.83.24-1.72-.58-2.05zm1.94-.8c-.76-.34-1.37.8-.64 1.07.33.15.64.06.88-.31.15-.34.09-.64-.24-.77zm-.03 6.83c-5.08.52-9.45-1.78-9.79-5.18-.34-3.34 3.49-6.47 8.57-6.99 5.1-.49 9.45 1.84 9.78 5.18.34 3.34-3.55 6.5-8.57 6.99zm10.12-11.14c-.18-.03-.3-.09-.39-.13-.15-.09-.27-.28-.12-.64.52-1.32.55-2.36.03-3.06-1.06-1.44-3.68-1.38-6.81-.06l-.24.09c-.34.12-.67.03-.52-.43.52-1.66.4-2.85-.3-3.62-.89-.86-2.28-.89-4.23-.12-3.92 1.56-10.43 7.35-10.43 12.75 0 1.63.64 3.1 1.91 4.35 2.53 2.57 6.66 3.86 10.95 3.86 3.98 0 7.75-1.23 10.09-2.94 2.31-1.72 3.77-3.86 3.77-5.82 0-2.12-1.67-3.59-3.71-4.23z"
								      fill-rule="evenodd"></path>
							</svg>
						</a>
					</span>
					<span>
						<wechat></wechat>
					</span>
				</li>
				<li><a href="javascript:">条款</a></li>
				<li><a href="javascript:">隐私政策</a></li>
				<li><a href="javascript:">网站地图</a></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Badge from "./Badge/Badge";
	import WeChat from './Share/WeChat'

	export default {
		name: "SiteFooter",
		data () {
			return {};
		},
		components: {
			'badge': Badge,
			'wechat': WeChat
		}
	}
</script>

<style lang="sass" scoped>
	.container-sitefooter
		.find-container
			float: left
			width: 25%
			box-sizing: border-box
			padding: 0 8px


		span
			font-size: 14px

		.share-container
			margin: 14px 0 !important
			padding-left: 40px !important

			button
				border: none

			li:nth-child(2)
				margin-top: 16px
				margin-bottom: 4px

			li:after
				content: ''
				display: block
				clear: both

			li:first-child
				margin-left: -8px

			span
				white-space: nowrap
				float: left
				box-sizing: border-box
				padding: 0 8px

		.href-list
			margin: 0
			padding: 0
			margin-top: 16px
			list-style: none

			li
				margin-bottom: 1px

			a
				color: #767676
				font-size: 14px
				font-weight: bold
</style>
